<template>
  <div>
    <!-- 轮播图 -->
    <Banner />
    <!-- 搜索框 -->
    <AutoComplete />
    <!-- 分类 -->
    <Classify @propLevelAndRegion="getLevelAndRegion" :getHospitalInfo="getHospitalInfo" />
  </div>
</template>

<script setup lang="ts">
import AutoComplete from '@/views/home/components/autocomplete/index.vue'
import Banner from '@/views/home/components/banner/index.vue'
import Classify from '@/views/home/components/classify/index.vue'

import { reqHospital } from '@/api/home'
import { Content, HospitalResponseData } from '@/api/home/type'
import { onMounted, ref, provide } from 'vue'

let pageNum = ref<number>(1)
let pageSize = ref<number>(5)
let total = ref<number>(0)
const hospContent = ref<Content>([])
// 开关控制loading效果
const loading = ref<boolean>(false)
onMounted(() => {
  getHospitalInfo(pageNum.value, pageSize.value, '', '')
})
// 获取医院数据
const getHospitalInfo = async (num: number, size: number, level: string, region: string) => {
  loading.value = true
  try {
    const res: HospitalResponseData = await reqHospital(num, size, level, region)
    // console.log(res.data)
    if (res.code === 200) {
      hospContent.value = res.data.content
      total.value = res.data.totalElements
      loading.value = false
    }
  } catch (error) {
    console.log(error)
    loading.value = false
  }
}

// 接收子组件传过来的数据
const getLevelAndRegion = (data: { level: string; region: string }) => {
  getHospitalInfo(pageNum.value, pageSize.value, data.level, data.region)
}

// 向子组件提供数据
provide('hospList', hospContent)
provide('total', total)
provide('loading', loading)
</script>

<style lang="scss" scoped>

</style>
